<template>
	<div id="return-rate">
		<component-title :title-text="'月度收益率'"></component-title>
		<div v-show="module==0">
			<div class="charts">
				<div ref="myChart" style="width:100%; height:240px;"></div>
			</div>
			<ul class="legendContainer">
				<li class="legend" v-for="item in bar">
					<div class="graph" :style="{background:item.color}"></div>
					<div class="text" v-text="item.text+'收益率(%)'"></div>
				</li>
			</ul>
		</div>
		<return-error v-show="module==1"></return-error>
		<return-empty v-show="module==2"></return-empty>
	</div>
</template>
<script>
	import echarts from 'echarts/lib/echarts'
	import 'echarts/lib/chart/bar'
	import 'echarts/lib/component/tooltip'
	import 'echarts/lib/component/grid'
	import 'echarts/lib/component/dataZoom'
	import Title from '@/components/Title'
	import RemoteDAO from '@/common/remoteDAO'
	import Jquery from 'jquery'
	import constant from '@/common/constant'

	const option={
		color: ['#2eabff'],
	    tooltip : {
	        trigger: 'axis',
	        axisPointer : {            
	            type : 'shadow',
	            shadowStyle:{
	            	color:'#309fea',
	            	opacity:0.1
	            }        
	        },
	        formatter:function(params,ticket,callback){
	        	if(params[0].dataIndex==0){
	        		return ''
	        	}
	        	else{
	        		return (
	        			params[0].name+
	                    '<br/>'+
	                    '<div style="display:inline-block; width:10px; height:10px; border-radius:50%; background:'+params[0].color+'"></div>&nbsp;'+
	                    params[0].seriesName+'：'+
	                    params[0].value+'%'+
	                    '<br/>'+
	                    '<div style="display:inline-block; width:10px; height:10px; border-radius:50%; background:'+params[1].color+'"></div>&nbsp;'+
	                    params[1].seriesName+'：'+
	                    params[1].value+'%'
		            )
	        	}
	        },
	        backgroundColor:'rgba(0,0,0,0.4)'
	    },
	    grid: {
	    	top:'5%',
	    	left:'0',
	    	right:'0',
	    	bottom:'20%',
	        containLabel: false
	    },
	    xAxis : [
	        {
	            type : 'category',
	            axisLine:{
	              show:false  
	            },
	            axisTick: {
	                show:false
	            },
	            axisLabel:{
	            	textStyle:{
	            		color:'#999'
	            	}
	            },
	            axisLine:{
	            	show:true,
	            	lineStyle:{
	            		color:'#c9daeb',
	            		type:'solid'
	            	},
	            	onZero:true
	            }
	        }
	    ],
	    yAxis : [
	        {
	            axisLine:{
	                show:false,
	                lineStyle:{
	                	color:'#c9daeb',
		                width:1,
		                type:'dotted'
	                }
	            },
	            axisLabel:{
	                show:true,
	                textStyle:{
	                	color:'#999'
	                },
	                formatter:'{value}%',
	                inside:true,
	                margin:4,
	                textStyle:{
	                	color:'#999',
	                	fontSize:10
	                }
	            },
	            type : 'value',
	            splitLine:{
	                lineStyle:{
	                    color:'#c9daeb',
	                    width:1,
	                    type:'dotted'
	                }
	            },
	            axisTick:{
	                show:false
	            },
	            splitNumber:2
	        }
	    ],
	    series : [
	        {
	            name:'我的收益',
	            type:'bar',
	            itemStyle:{
	            	normal:{
	            		color:'#fb8a3f'
	            	}
	            }
	        },
	        {
	        	name:'沪深300',
	        	type:'bar',
	        	itemStyle:{
	        		normal:{
	        			color:'#2eabff'
	        		}
	        	}
	        }
	    ]
	}
	let dataOption={
		xAxis:[
			{data:[]}
		],
		series:[
			{data:[]},
			{data:[]}
		]
	}
	let curmonthOption={
		series:[
			{barWidth:'30'},
			{barWidth:'30'}
		]
	}
	let notCurmonthOption={
		series:[
			{barWidth:'30%'},
			{barWidth:'30%'}
		]
	}

	export default{
		props:['time'],
		data () {
			return {
				module:0,
				myChart:null,
				showScroll:false,
				times:constant.TimeTabData,
				bar:[
					{
						name:'my',
						text:'我的',
						color:'#fb8a3f'

					},
					{
						name:'hushen300',
						text:'沪深300',
						color:'#2eabff'
					}
				]
			}
		},
		components:{
			'component-title':Title
		},
		mounted () {
			setTimeout(()=>{
				this.myChart=echarts.init(this.$refs.myChart)
				this.myChart.setOption(option)
				this.initEvent()
			},20)
		},
		beforeDestroy(){
			echarts.dispose(this.myChart);
		},
		watch:{
			time:function(){
				setTimeout(()=>{
					this.initEvent()
				},0)
			}
		},
		methods:{
			graph(){
				this.myChart.setOption(dataOption);
			},
			initEvent(){
				this.module=0
				let self=this
		        let obj={"pagenum": '',"recent": ''}
		        RemoteDAO.callZL13100031(obj,self.ZL13100031)
			},
			gainDate(a,b,c){
				let arr=[];
				let num=0;
				for(let i=0;i<c;i++){
					if(b<10){
						b='0'+b;
					}
					arr.push(''+a+b);
					b--;
					if(b<1){
						b=12;
						a--;
					}
				}
				arr.reverse();
				return arr.join(',');
			},
			ZL13100040(result){
				if(result.error=='1'){
					this.module=1
				}
				else{
					let data=result.data;
					let bigdata=JSON.parse(data).body[0].bigdata;
					let specData=JSON.parse(bigdata).hits.hits;
					if(specData.length==0){
						this.module=2
					}
					else{
						dataOption.xAxis[0].data=JSON.parse(bigdata).hits.hits.reduce((pre,cur)=>{
							let dateString=cur._source.recent.toString().split('');
							dateString.splice(4,0,'/');
							pre.push(dateString.join(''));
							return pre;
						},[]);
						dataOption.xAxis[0].data.unshift('')
						dataOption.xAxis[0].data.push('')
						dataOption.series[0].data=JSON.parse(bigdata).hits.hits.reduce((pre,cur)=>{
							let num=cur._source.total_profit_total_rate*100;
							pre.push(num.toFixed(2));
							return pre;
						},[]);
						dataOption.series[0].data.unshift('')
						
					    this.graph();
					}
				}	
			},
			ZL13100041(result){
				if(result.error=='1'){
					this.module=1
				}
				else{
					let data=result.data;
					let bigdata=JSON.parse(data).body[0].bigdata;
					let specData=JSON.parse(bigdata).hits.hits;
					if(specData.length==0){
						this.module=2
					}
					else{
						dataOption.series[1].data=JSON.parse(bigdata).hits.hits.reduce((pre,cur)=>{
							let num=cur._source.hs300_total_profit_rate*100;
							pre.push(num.toFixed(2));
							return pre;
						},[]);
						dataOption.series[1].data.unshift('')

					    this.graph();
					}
				}
			},
			ZL13100031(result){
		        let data=result.data;
		        let bigdata=JSON.parse(data).body[0].bigdata;
		        let specData=JSON.parse(bigdata).hits.hits;
		        let curMonth=specData.filter(value=>{
		        	return value._source.recent=='curmonth'
		        })
		        let initialDate=curMonth[0]._source.begin_date.slice(0,6)
		        let year=initialDate.slice(0,4)
		        let month=parseInt(initialDate.slice(4,6))
		        let obj={'recent':''};
				if(this.time==4){
					obj.recent='201601,201602,201603,201604,201605,201606,201607,201608,201609,201610,201611,201612';
				}
				else{
					if(this.time==3){
						this.times[this.time].monthNum=month;
					}
					obj.recent=this.gainDate(year,month,this.times[this.time].monthNum)
				}

				if(this.time==0){
					this.myChart.setOption(curmonthOption)
				}
				else{
					this.myChart.setOption(notCurmonthOption)
				}

				let self=this
				RemoteDAO.callZL13100040(obj,self.ZL13100040)
				RemoteDAO.callZL13100041(obj,self.ZL13100041)
			}
		}
	}
</script>
<style scoped>
	.charts{
		padding: 0;
	}
	#return-rate{
		margin-top: 0.4rem;
	}
	.legendContainer{
		display: flex;
		justify-content: space-around;
	}
	.legend{
		height: 0.15rem;
	}
	.legend .graph{
		width: 0.15rem;
		height: 0.15rem;
		background: #1578ff;
		border-radius: 3px;
		float: left;
	}
	.legend .text{
		font-size: 0.12rem;
		color: #555;
		float: left;
		line-height: 0.15rem;
		margin-left: 0.1rem;
	}
</style>